<script setup>
import { ref } from "vue";
import {
  PlusOutlined,
  CloseOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
// import { UploadChangeParam } from 'ant-design-vue/es/upload/interface'

const formState = ref({
  name: "****网络有限公司",
  type: "有限责任公司（自然人独资）",
  creditCode: "90040101MA9WONTK64",
  registeredAddress: "XXX省XXX市XXX区XXX镇XXX路XXX门牌号",
  corporateName: "李四",
  corporateNumber: "546543198003112250",
  banner: [
    "https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png",
    "https://ali-img.100520.com/images/202448/aa6197d394ed1bf888a15b466e693713_1idh1hle3.png",
  ],
  scanningCopy: [
    "https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png",
    "https://ali-img.100520.com/images/202448/aa6197d394ed1bf888a15b466e693713_1idh1hle3.png",
  ],
  Letter: [
    "https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png",
    "https://ali-img.100520.com/images/202448/aa6197d394ed1bf888a15b466e693713_1idh1hle3.png",
  ],
});
let fileList_banner = ref([]);
let fileList_scanningCopy = ref([]);
let fileList_Letter = ref([]);

const rules = {
  name: [
    {
      required: true,
      message: "请输入企业名称",
      trigger: "change",
    },
  ],
  type: [
    {
      required: true,
      message: "请输入机构类型",
      trigger: "change",
    },
  ],
  registeredAddress: [
    {
      required: true,
      message: "请输入注册地址",
      trigger: "change",
    },
  ],
  creditCode: [
    {
      required: true,
      message: "请输入统一社会信用代码",
      trigger: "change",
    },
  ],
  corporateName: [
    {
      required: true,
      message: "请输入法人代表姓名",
      trigger: "change",
    },
  ],
  corporateNumber: [
    {
      required: true,
      message: "请输入法人代表身份证号码",
      trigger: "change",
    },
  ],
};
const removeImage = (type, index) => {
  if (type === "banner") {
    formState.value.banner.splice(index, 1);
    fileList_banner.value.splice(index, 1);
  } else if (type === "scanningCopy") {
    formState.value.scanningCopy.splice(index, 1);
    fileList_scanningCopy.value.splice(index, 1);
  } else if (type === "Letter") {
    formState.value.Letter.splice(index, 1);
    fileList_Letter.value.splice(index, 1);
  }
};

const beforeUpload = (file) => {
  const isJPGorPNG = file.type === "image/jpeg" || file.type === "image/png";
  if (!isJPGorPNG) {
    this.$message.error("只能上传JPG/PNG格式的图片!");
  }
  const isLt1M = file.size / 1024 / 1024 < 1;
  if (!isLt1M) {
    this.$message.error("图片大小必须小于1MB!");
  }
  return isJPGorPNG && isLt1M;
};
const onSave = () => {
  console.log("onSave: ", formState);
  console.log("onSave: fileList_banner", fileList_banner);
  console.log("onSave: fileList_scanningCopy", fileList_scanningCopy);
  console.log("onSave: fileList_Letter", fileList_Letter);
};
const cancel = () => {
  console.log("cancel: ", formState);
};
</script>

<template>
  <div class="app-container">
    <a-card
      title="编辑资料"
      class="box-card"
      bordered
      headStyle="text-align: center;font-weight: bold;font-size: 20px;"
    >
      <a-form :model="formState" ref="formRef" :rules="rules" layout="vertical">
        <a-form-item label="企业名称(该名称与营业执照名称统一)" name="name">
          <a-input
            v-model:value="formState.name"
            placeholder="请输入企业名称"
            allow-clear
          />
        </a-form-item>
        <a-form-item label="机构类型" name="type">
          <a-input
            v-model:value="formState.type"
            placeholder="请输入机构类型"
            allow-clear
          />
        </a-form-item>
        <a-form-item label="统一社会信用代码" name="creditCode">
          <a-input
            v-model:value="formState.creditCode"
            placeholder="请输入统一社会信用代码"
            allow-clear
          />
        </a-form-item>
        <a-form-item label="注册地址" name="registeredAddress">
          <a-input
            v-model:value="formState.registeredAddress"
            placeholder="请输入注册地址"
            allow-clear
          />
        </a-form-item>
        <a-form-item label="法人代表姓名" name="corporateName">
          <a-input
            v-model:value="formState.corporateName"
            placeholder="请输入法人代表姓名"
            allow-clear
          />
        </a-form-item>
        <a-form-item label="营业执照扫描件（格式必须为JPG或PNG）" name="businessLicense">
          <div v-if="formState.banner && formState.banner.length">
            <div class="box_image" v-for="(url, index) in formState.banner" :key="index">
              <a-image :width="120" :src="url" />
              <!-- <i
                class="el-icon-close"
                type="close"
                @click="removeImage(index)"
              /> -->
              <CloseOutlined
                class="el-icon-close"
                type="close"
                @click="removeImage('banner', index)"
              />
            </div>
          </div>
          <div v-else class="upload-container1">
            <a-upload
              v-model:fileList="fileList_banner"
              list-type="picture-card"
              :multiple="true"
              :max-count="5"
              :before-upload="beforeUpload"
            >
              <div>
                <PlusOutlined
                  :style="{
                    fontSize: '32px',
                    color: 'rgba(222, 222, 222, 1)',
                  }"
                />
                <div class="margintop18">点击或拖拽上传</div>
              </div>
            </a-upload>
          </div>
          <div class="tips margintop18">
            ① 请上传4~5张，建议尺寸1920X1080px，最小不低于370X180px；<br />②
            支持JPG/PNG格式，单张图片不超过1M。此图片用于应用详情页展示。
          </div>
        </a-form-item>
        <a-row :gutter="[8, 16]">
          <a-col :span="12">
            <a-form-item label="法人代表姓名" name="corporateName">
              <a-input
                v-model:value="formState.corporateName"
                placeholder="请输入法人代表姓名"
                allow-clear
              /> </a-form-item
          ></a-col>
          <a-col :span="12">
            <a-form-item label="法人代表身份证号码" name="corporateNumber">
              <a-input
                v-model:value="formState.corporateNumber"
                placeholder="请输入法人代表身份证号码"
                allow-clear
              /> </a-form-item
          ></a-col>
        </a-row>
        <a-form-item
          label="法人代表身份证扫描件（格式必须为JPG或PNG）"
          name="businessLicense"
        >
          <div v-if="formState.scanningCopy && formState.scanningCopy.length">
            <div
              class="box_image"
              v-for="(url, index) in formState.scanningCopy"
              :key="index"
            >
              <a-image :width="120" :src="url" />
              <CloseOutlined
                class="el-icon-close"
                type="close"
                @click="removeImage('scanningCopy', index)"
              />
            </div>
          </div>
          <div v-else class="upload-container1">
            <a-upload
              v-model:fileList="fileList_scanningCopy"
              list-type="picture-card"
              :multiple="true"
              :max-count="5"
              :before-upload="beforeUpload"
            >
              <div>
                <PlusOutlined
                  :style="{
                    fontSize: '32px',
                    color: 'rgba(222, 222, 222, 1)',
                  }"
                />
                <div class="margintop18">点击或拖拽上传</div>
              </div>
            </a-upload>
          </div>
        </a-form-item>
        <a-form-item label="认证公函（格式必须为JPG或PNG）" name="businessLicense">
          <div v-if="formState.Letter && formState.Letter.length">
            <div class="box_image" v-for="(url, index) in formState.Letter" :key="index">
              <a-image :width="120" :src="url" />
              <CloseOutlined
                class="el-icon-close"
                type="close"
                @click="removeImage('Letter', index)"
              />
            </div>
          </div>
          <div v-else class="upload-container1">
            <a-upload
              v-model:fileList="fileList_Letter"
              list-type="picture-card"
              :multiple="true"
              :max-count="5"
              :before-upload="beforeUpload"
            >
              <div>
                <PlusOutlined
                  :style="{
                    fontSize: '32px',
                    color: 'rgba(222, 222, 222, 1)',
                  }"
                />
                <div class="margintop18">点击或拖拽上传</div>
              </div>
            </a-upload>
          </div>
          <div class="tips_box margintop18">
            <a-typography-title :level="5" class="tips"
              ><ExclamationCircleOutlined />温馨提示</a-typography-title
            >
            <a-typography-paragraph ellipsis="true" class="tips">
              ①下载<a href="javascript:;" style="color: #4cc87e" target="_blank"
                >《官方认证通用申请公函》</a
              >，填写完整后加盖红色公章，上传清晰的扫描件。
            </a-typography-paragraph>
            <a-typography-paragraph ellipsis="true" class="tips"
              >② 有效期为一年，需要每年更新认证公函。
            </a-typography-paragraph>
            <a-typography-paragraph ellipsis="true" class="tips"
              >如有问题，可联系<a
                style="color: #4cc87e"
                href="javascript:;"
                target="_blank"
                >人工服务</a
              >。</a-typography-paragraph
            >
          </div>
          <a-col :span="3" :xs="24">
            <a-form-item
              :wrapperCol="{ span: 24 }"
              style="text-align: center"
              class="margintop18"
            >
              <a-button
                htmlType="submit"
                style="margin-right: 16px; background-color: rgba(76, 200, 126, 1)"
                type="primary"
                @click="onSave"
                >保存并提交</a-button
              >
              <a-button style="margin-left: 8px" @click="cancel">取消保存</a-button>
            </a-form-item>
          </a-col>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<style lang="less" scoped>
.app-container {
  width: 100%;
  background: #ececec;
}

.box-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 2px;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
  h1 {
    height: 48px;
    text-align: center;
    font-weight: bolder;
  }
}

.upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.margintop18 {
  margin-top: 18px;
}
.box_image {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
  position: relative;
  .el-icon-close {
    width: 12px;
    height: 12px;
    position: absolute;
    top: 0;
    right: 0;

    font-size: 20px;

    color: #fff;
    background: rgba(#000, 0.3);

    cursor: pointer;
  }
}
.tips_box {
  background-color: #edfaf1;
  padding: 12px;
}
.tips {
  font-size: 12px;
  color: #969696;
}
:deep(.css-dev-only-do-not-override-12oi33h .ant-typography) {
  margin-bottom: 0;
}
</style>
